<template>
	<view class="center">
		<view class="title">
			<u-image :src="storeData.storeImage" width="100%" height="100%"></u-image>
			<u-image :src="storeData.image" width="104" height="104" class="touxiang"></u-image>
			<view class="shangdianmingcheng">
				{{storeData.name}}
			</view>

			<view class="qiyedian">
				企业店
			</view>

			<view class="shoucang" @click="handleSHoucang" v-if="storeData.isCollect == 0">
				收藏
			</view>
			<view class="shoucang2" @click="handleSHoucang2" v-else>
				取消收藏
			</view>

		</view>

		<view class="lunbotu">
			<u-swiper :list="imgList" height='373' img-mode="scaleToFill"></u-swiper>
		</view>

		<view class="shangmiandexuanze">
			<view class="shangmiandexuanzeItem" @click="handleShangmian(1)">
				<span class="shangmiandexuanzeItemtext">全部商品</span>
				<span v-if="currentIndex == 1" class="underlint"></span>
			</view>

			<view class="shangmiandexuanzeItem" @click="handleShangmian(2)">
				<span class="shangmiandexuanzeItemtext">论坛</span>
				<span v-if="currentIndex == 2" class="underlint"></span>
			</view>
		</view>


		<view v-show="currentIndex == 1" style="padding-bottom: 100px;">
			<view class="selectview">
				<view class="selectviewItem" :style="currentMath == 1 ? 'color: rgb(254, 119, 12);' : ''"
					@click="handleXiamian(1)">
					推荐
				</view>
				<view class="selectviewItem" :style="currentMath == 2 ? 'color: rgb(254, 119, 12);' : ''"
					@click="handleXiamian(2)">
					销量
				</view>
				<view class="selectviewItem" :style="currentMath == 3 ? 'color: rgb(254, 119, 12);' : ''"
					@click="handleXiamian(3)">
					价格
				</view>
			</view>

			<div class="proListdiv">
				<div class="proItems" v-for="items in proList" :key="items.id" @click="handleGoToDetail(items.id)">
					<div class="proItems_img">
						<image :src="items.image" mode=""
							style="width: 100%;height: 100%; border-radius: 15rpx 15rpx 0 0">
						</image>
					</div>
					<div class="proItems_name">{{items.name}}</div>
					<div class="proItems_price"><span style="font-size: 20rpx;">¥</span> {{items.price}}


					</div>



				</div>
			</div>
		</view>

		<view v-show="currentIndex == 2">
			<view class="tiezilistcenter">
				<view class="tiezilistitem" v-for="(item, index) in list" :key="index" @click="handleGoToTiezi(item)">
					<view class="tiezilistitemtime">
						{{item.createTime}}
					</view>
					<view class="tiezilistitemtitle">
						{{item.title}}
					</view>


					<view class="tiezilistitempic1"
						v-if="item.productImage!=null && item.productImage.length != 0 && item.productImage.split(',').length == 1 && item.type == 2">
						<image :src="item.productImage"
							@click.stop="handleGoTiDetail(`/pages/product/goods?id=${item.productId}`)"></image>
					</view>


					<view class="tiezilistitempic2"
						v-if="item.productImage!=null && item.productImage.length != 0 && item.productImage.split(',').length > 1 && item.type == 2">
						<view class="tiezilistitempicitem" v-for="(i, index) in item.productImage.split(',')"
							:key="index">
							<image :src="i" mode=""></image>
						</view>
					</view>

					<view class="tiezilistitempic1"
						v-if="item.image!=null &&item.image.length != 0 && item.image.split(',').length == 1 && item.type == 1">
						<image :src="item.image"></image>
					</view>

					<view class="tiezilistitempic2"
						v-if="item.image!=null && item.image.length != 0 && item.image.split(',').length > 1 && item.type == 1">
						<view class="tiezilistitempicitem" v-for="(i, index) in item.image.split(',')" :key="index">
							<image :src="i" mode=""></image>
						</view>
					</view>


				</view>


			</view>
		</view>

	</view>
</template>

<script>
	// 引用组件

	import {
		storeProPage,
		postsList,
		storeData,
		userDelCollect
	} from '@/api/user.js'
	import {

		userCollect,

	} from "@/api/goods.js"
	import storage from "@/utils/storage.js";
	export default {
		data() {
			return {
				keyword: '',
				imgList: [

				],
				currentIndex: 1,
				currentMath: 1,
				proList: [],
				page: 1,
				page2: 1,
				limit: 10,
				storeId: '',
				list: [],
				storeData: {}
			};
		},



		async onLoad(options) {
			this.storeId = options.id
		},



		mounted() {
			this.getProList();
			this.getList();
			storeData({
				id: this.storeId,
				userId: storage.getUserInfo().id
			}).then(res => {

				this.storeData = res.data;
				this.imgList = res.data.banners
			})
		},

		// 下拉加载
		onReachBottom() {
			if (this.currentIndex == 1) {
				this.page = this.page + 1;
				this.getProList()
			} else {
				console.log(this.page2)
				this.page2 = this.page2 + 1;
				this.getList()
			}
		},

		methods: {
			handleGoToTiezi(item) {
				uni.navigateTo({
					url: `/pages/business/tieziDetail?id=${item.id}`
				})
			},

			handleGoTiDetail(url) {
				uni.navigateTo({
					url,
				})
			},
			handleSHoucang() {
				userCollect({
					type: 1,
					userId: storage.getUserInfo().id,
					collectId: this.storeId
				}).then(res => {
					if (res.code == '000000') {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})

						storeData({
							id: this.storeId,
							userId: storage.getUserInfo().id
						}).then(res => {

							this.storeData = res.data;
							this.imgList = res.data.banners
						})
					}
				})
			},

			handleSHoucang2() {
				userDelCollect({
					type: 1,
					userId: storage.getUserInfo().id,
					collectId: this.storeId
				}).then(res => {
					if (res.code == '000000') {
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						})

						storeData({
							id: this.storeId,
							userId: storage.getUserInfo().id
						}).then(res => {

							this.storeData = res.data;
							this.imgList = res.data.banners
						})
					}
				})
			},

			back() {
				uni.navigateBack();
			},

			handleGoToDetail(items) {
				console.log(items)
				uni.navigateTo({
					url: `/pages/product/goods?id=${items}`,
				});
			},

			handleShangmian(val) {
				if (this.currentIndex == val) {
					return
				}

				this.currentIndex = val;


			},

			handleXiamian(val) {
				if (this.currentMath == val) {
					return
				}

				this.currentMath = val;

				this.page = 1;
				this.proList = []
				this.getProList()
			},


			getProList() {
				storeProPage({
					page: this.page,
					type: this.currentMath,
					limit: this.limit,
					storeId: this.storeId
				}).then(res => {
					if (res.code == '000000') {
						this.proList = [...this.proList, ...res.data.list]
					}
				})
			},

			getList() {
				postsList({
					page: this.page2,
					type: this.currentMath,
					limit: this.limit,
					id: this.storeId
				}).then(res => {
					if (res.code == '000000') {
						this.list = [...this.list, ...res.data.list]
					}
				})
			},


		},
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.title {
		width: 100%;
		height: 374rpx;
		position: relative;

	}

	.touxiang {
		position: absolute;
		top: 203rpx;
		left: 31rpx;
	}

	.shangdianmingcheng {
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #FFFFFF;
		position: absolute;
		top: 217rpx;
		left: 155rpx;
	}

	.qiyedian {
		width: 84rpx;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 21rpx;
		color: #FFFFFF;
		position: absolute;
		top: 254rpx;
		left: 156rpx;
		background: rgb(254, 119, 12);
	}

	.shoucang {
		height: 57rpx;
		width: 105rpx;
		text-align: center;
		line-height: 57rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 25rpx;
		color: #FFFFFF;
		position: absolute;
		top: 227rpx;
		right: 53rpx;
		border-radius: 30rpx;
		background: rgb(222, 119, 48);
	}


	.shoucang2 {
		height: 57rpx;
		width: 205rpx;
		text-align: center;
		line-height: 57rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 25rpx;
		color: #FFFFFF;
		position: absolute;
		top: 227rpx;
		right: 53rpx;
		border-radius: 30rpx;
		background: rgb(222, 119, 48);
	}

	.lunbotu {
		width: 100%;
		height: 408rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		margin-top: -30rpx;
		z-index: 100000;
		position: relative;
		padding: 35rpx 24rpx;
	}

	.shangmiandexuanze {
		width: 100%;
		height: 71rpx;
		line-height: 71rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 29rpx;
		color: #0E1527;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		margin-top: 40rpx;
	}

	.shangmiandexuanzeItem {
		height: 100%;
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: center;
	}

	.shangmiandexuanzeItemtext {
		width: 100%;

	}

	.underlint {
		width: 20%;
		height: 5rpx;
		background: rgb(254, 119, 12);
	}

	.selectview {
		width: 100%;
		background: #f3f3f3;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.selectviewItem {
		width: 33%;
		height: 100%;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #202224;
	}

	.proListdiv {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
		margin-top: 20rpx;
	}

	.proItems {
		width: 347rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-left: 22rpx;
		margin-bottom: 22rpx;
		position: relative;
		border-radius: 15rpx;
	}

	.proItems_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 348rpx;

	}

	.proItems_name {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		padding-left: 27rpx;
		padding-right: 27rpx;
		position: absolute;
		top: 367rpx;
		left: 0;

		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.proItems_price {
		position: absolute;
		left: 28rpx;
		bottom: 16rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #F74600;
	}

	.proItems_savl {
		margin-left: 10rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18rpx;
		color: #BCC1CA;
	}


	.tiezilistcenter {
		width: 100%;
		padding: 0 18rpx;
		padding-bottom: 140rpx;
		background: #f3f3f3;

	}

	.tiezilistitem {
		width: 100%;
		padding: 25rpx;
		margin-top: 25rpx;
		background: #FFFFFF;
	}

	.tiezilistitemtime {
		font-family: HiraginoSansGB;
		font-weight: normal;
		font-size: 29rpx;
		color: #6E7479;

	}

	.tiezilistitemtitle {
		width: 100%;
		font-family: HiraginoSansGB;
		font-weight: normal;
		font-size: 33rpx;
		color: #202224;
		line-height: 40rpx;
		margin-top: 17rpx;
	}

	.tiezilistitempic1 {
		width: 100%;
		height: 367rpx;
		margin-top: 27rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.tiezilistitempic2 {
		width: 100%;
		margin-top: 27rpx;
	}

	.tiezilistitempicitem {
		width: 214rpx;
		height: 214rpx;
		margin-top: 5rpx;
		margin-right: 5rpx;
		display: inline-block;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.lasttiezilist {
		width: 100%;
		background: rgb(249, 250, 251);
		height: 136rpx;
		position: fixed;
		bottom: 0;
	}
</style>
